<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="icon" href="./file/README/狸花猫-小喵子-酷.svg">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <!-- Docsify -->
  <!-- 原始 CDN -->
  <!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css"> -->
  <link rel="stylesheet" href="./static/vue.css">
</head>

<body>
  <nav class="nav">
    <a href="/#/">首页</a>
    <a href="/#/document/RUN">启动部署</a>
    <a href="/#/document/SERVER">后端开发</a>
    <a href="/#/document/CLIENT">前端开发</a>
    <a href="/#/document/component/README">内置组件</a>
    <a href="https://gitee.com/yukino_git/lihua" target="_blank">码云主页</a>
    <a href="javascript:void(0);" onclick="docsifyDarkSwitcher()" class="dark-btn"></a>
  </nav>

  <div id="app"></div>

  <script>
    window.$docsify = {
      coverpage: true,
      onlyCover: false,
      name: 'Lihua 开发文档',
      loadSidebar: true,
      subMaxLevel: 4,
      auto2top: true,
      copyCode: {
        buttonText: { '/': '复制代码' },
        errorText: { '/': '复制失败' },
        successText: { '/': '复制成功' }
      },
      search: {
        placeholder: { '/': '搜索文档' },
        noData: { '/': '找不到结果' }
      },
      count: {
        countable: true,
        fontsize: '0.9em',
        color: 'rgb(90,90,90)',
        language: 'chinese'
      },
      darkMode: {
        dark: {
          background: "#1c2022",
          toggleBtnBg: "#34495e",
          textColor: "#b4b4b4"
        },
        light: {
          background: "white",
          toggleBtnBg: "var(--theme-color)",
          textColor: "var(--theme-color)"
        }
      }
    }
  </script>
  
  <!-- 原始 CDN -->
  <!--
	  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
	  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>
	  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
	  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
	  <script src="//unpkg.com/docsify-count/dist/countable.js"></script>
	  <script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
	  <script src="//cdn.jsdelivr.net/gh/LIGMATV/docsify-dark-switcher@latest/docsify-dark-switcher.js"></script>
	  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
	  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
	-->

  <!-- Docsify 核心 -->
  <script src="./static/docsify@4.js"></script>

  <!-- Prism.js 语法高亮 -->
  <script src="./static/prism-java.min.js"></script>
  <script src="./static/prism-bash.min.js"></script>

  <!-- Docsify 插件 -->
  <script src="./static/search.min.js"></script>
  <script src="./static/zoom-image.min.js"></script>
  <script src="./static/docsify-copy-code.min.js"></script>
  <script src="./static/docsify-pagination.min.js"></script>
  <script src="./static/docsify-dark-switcher.js"></script>
</body>

<style>
  :root {
    --dark-base-background: #222;
    --dark-base-color: #bbc0c4;
    --dark-theme-color: var(--theme-color, #42b983);
    --dark-code-color: var(--dark-color);
    --dark-heading-color: var(--dark-theme-color);
    --dark-cover-background: rgba(0,0,0,0);
    --dark-code-background: #303030;
    --dark-tip-background: #2c0000;
    --dark-warn-background: #005842;
    --dark-icon-size: 25px;
    --dark-icon-transition: .1s ease-in-out .1s;
    --dark-moon-color: #000000;
    --dark-sun-color: #ffffff;
    --dark-moon-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M9.598 1.591a.749.749 0 0 1 .785-.175 7.001 7.001 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786m1.616 1.945a7 7 0 0 1-7.678 7.678 5.499 5.499 0 1 0 7.678-7.678'/%3E%3C/svg%3E");
    --dark-sun-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 12a4 4 0 1 1 0-8a4 4 0 0 1 0 8m0-1.5a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5m5.657-8.157a.75.75 0 0 1 0 1.061l-1.061 1.06a.749.749 0 0 1-1.275-.326a.749.749 0 0 1 .215-.734l1.06-1.06a.75.75 0 0 1 1.06 0Zm-9.193 9.193a.75.75 0 0 1 0 1.06l-1.06 1.061a.75.75 0 1 1-1.061-1.06l1.06-1.061a.75.75 0 0 1 1.061 0M8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0M3 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 3 8m13 0a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 16 8m-8 5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13m3.536-1.464a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061M2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.751.751 0 0 1-.018 1.042a.751.751 0 0 1-1.042.018l-1.06-1.06a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E");
  }

  button[onclick="docsifyDarkSwitcher()"] {
    display: none;
  }

  .nav {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100vw;
    padding-left: 30px;
    padding-bottom: 6px;
  }

  .dark-btn {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url("./file/README/狸花猫-太阳.svg");
    background-size: contain;
    background-repeat: no-repeat;
    text-decoration: none;
  }

  body.docsify-dark-mode {
    .dark-btn {
      background-image: url("./file/README/狸花猫-月亮.svg");
    }
    section.cover.show {
      background-image: linear-gradient(-135deg, #1F7A56 0%, #2C3690 100%);
    }
  }

  .start {
    font-size: 24px;
    padding: 10px 20px;
    color: black;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
  }
  .start:hover {
    color: #42b983;
    font-size: 24px;
    border-color: #42b983;
    box-shadow: 0 4px 8px rgba(66, 185, 131, 0.2);
  }

  section.cover.show {
    background-image: linear-gradient(-135deg, #c2ffd8 10%, #465efb);
    background-size: 200% 200%;
    animation: gradientAnimation 30s ease infinite;
  }


  @keyframes gradientAnimation {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
  
</style>
</html>
